<script setup lang="ts" name="SystemUserDepartTree">
import { storeToRefs } from 'pinia'
import { useAppStoreWithOut } from '@/store/modules/app'
import { ElTree } from 'element-plus'
import { DepartApi } from '@/api/system/depart'
import { defaultProps, handleTree } from '@/utils/tree'
const appStore = useAppStoreWithOut()
const { systemConfig } = storeToRefs(appStore)

const { t } = useI18n() // 国际化

const queryLoading = ref(true) // 列表的加载中
const departName = ref('')
const departList = ref<Tree[]>([]) // 树形结构
const treeRef = ref<InstanceType<typeof ElTree>>()

/** 获得部门树 */
const getTree = async () => {
  queryLoading.value = true
  try {
    const res = await DepartApi.list()
    departList.value = []
    departList.value.push(...handleTree(res))
  } finally {
    queryLoading.value = false
  }
}

/** 基于名字过滤 */
const filterNode = (name: string, data: Tree) => {
  if (!name) return true
  if (!data.name) return false
  return data.name.includes(name)
}

/** 处理部门被点击 */
const handleNodeClick = async (row: { [key: string]: any }) => {
  emits('node-click', row)
}
const emits = defineEmits(['node-click'])

/** 处理重置后，清空选中状态 */
const removeChecked = () => {
  treeRef.value!.setCheckedKeys(treeRef.value!.getCheckedKeys(), false)
  treeRef.value!.setCurrentKey(undefined)
}
defineExpose({ removeChecked }) // 提供 removeChecked 方法，用于清空选中状态

// 树结构过滤
const filterTreeList = () => {
  treeRef.value!.filter(departName.value)
}
/** 监听departName */
watch(
  () => departName.value,
  (val) => {
    treeRef.value!.filter(val)
  }
)

/** 初始化 */
onMounted(async () => {
  await getTree()
})
</script>

<template>
  <el-aside width="240px" class="flex">
    <el-card v-loading="queryLoading && systemConfig.loadingType === 'module'" shadow="never" class="flex flex-1 flex-col">
      <template #header>
        <div class="card-header">
          <el-input v-model="departName" :placeholder="t('sys.depart.rules', 'name')" @input="filterTreeList">
            <template #append>
              <el-button icon="Search" @click="filterTreeList" />
            </template>
          </el-input>
        </div>
      </template>
      <el-scrollbar>
        <el-tree ref="treeRef" :data="departList" :props="defaultProps" node-key="id" default-expand-all :expand-on-click-node="false" :filter-node-method="filterNode" :highlight-current="true" :check-on-click-node="true" check-strictly @node-click="handleNodeClick" />
      </el-scrollbar>
    </el-card>
  </el-aside>
</template>

<style scoped lang="scss">
.el-aside {
  margin-right: var(--el-space);
  overflow: inherit;

  .el-card {
    :deep(.el-card__header) {
      padding: calc(var(--el-space) - 5px);
    }

    :deep(.el-card__body) {
      position: relative;
      display: flex;
      flex: 1;
      padding: 0;

      .el-scrollbar {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;

        .el-scrollbar__wrap {
          padding: calc(var(--el-space) / 2);
        }
      }
    }
  }
}
</style>
